<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>七牛图片上传</title>
</head>
<body>
  <form id="formData" enctype="multipart/form-data">
    <input id="file" type="file" onchange="handleClick()" name="file" multiple>
  </form>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    var token, key;
    var upload = function (data) {
      var formData = new FormData();
      formData.append('file', data)
      formData.append('token', token)
      $.ajax({
        url: 'http://upload.qiniu.com',
        type: 'POST',
        cache: false,
        processData: false,
        contentType: false,
        data: formData
      }).done(function (response) {
        console.log(response)
      }).fail(function (error) {
        console.log(error)
      })
    }
    var handleClick = function () {
      if (!token) {
        setTimeout(function () {
          handleClick();
        }, 300)
      } else {
        var files = $('#file')[0].files;
        $.each(files, function (index, file) {
          upload(file)
        })
      }
    }

    $.get('/token').done(function (response) {
      token = response.data.token;
      key = response.data.key;
    })

  </script>
</body>
</html>